<template>
  <div class="root">
<!--    <div class="title">人员管理</div>-->
    <EmployeeDrawer :type="drawerType" :data="drawerData"/>
    <div class="add-employee">
      <button @click="toggleDrawer(DRAWER_TYPE.add)">添加人员</button>
    </div>
    <div class="employee-list">
      <el-table :data="store.employeeList" style="width: 100%;" v-loading="store.getEmployeeLoading">
        <el-table-column fixed prop="phone" label="手机号"  min-width="120"/>
        <el-table-column prop="name" label="姓名"  min-width="100"/>
        <el-table-column prop="sex" label="性别"  min-width="80" >
          <template #default="scope">{{ SEX[scope.row.sex]!==undefined ? SEX[scope.row.sex] : '其他'}}</template>
        </el-table-column>
        <el-table-column prop="port" label="岗位"  min-width="120">
          <template #default="scope">{{ sysStore.PORT[scope.row.port]!==undefined ? sysStore.PORT[scope.row.port] : '其他岗位'}}</template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱"  min-width="240"/>
        <el-table-column prop="entry_date" label="入职时间"  min-width="100">
          <template #default="scope">{{ scope.row.entry_date? scope.row.entry_date : '-'}}</template>
        </el-table-column>
        <el-table-column prop="leave_date" label="离职时间"  min-width="100">
          <template #default="scope">{{ scope.row.leave_date? scope.row.leave_date : '-'}}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态"  min-width="100">
          <template #default="scope">{{ EMPLOYEE_STATUS[scope.row.status]!==undefined ? EMPLOYEE_STATUS[scope.row.status] : '其他'}}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作"  min-width="100">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="toggleDrawer(DRAWER_TYPE.detail, scope.row)">详情</el-button>
            <el-button link type="primary" size="small" @click="toggleDrawer(DRAWER_TYPE.edit, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-container">
        <PageSelect
            :pageInfo="pageDetailInfo"
            :totalCount="store.totalCount"
            @update:pageInfo="handlePageInfoUpdate"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import EmployeeDrawer from "@/components/employee/EmployeeDrawer.vue";
import {useEmployeeStore} from "@/store/employee";
import {DRAWER_TYPE, EMPLOYEE_STATUS} from "@/dict/dict-employee";
import {SEX, SYS_DICT} from "@/dict/dict-sys";
import {useSysDictStore} from "@/store/store-sys-dict-pinia";
import PageSelect from "@/components/common/PageSelect.vue";

const store = useEmployeeStore();
const sysStore = useSysDictStore();

onMounted(()=>{
  const data = {
    skip: pageDetailInfo.value.currentPage,
    limit: pageDetailInfo.value.pageSize
  }
  store.getEmployeeList(data);
  sysStore.getSysDict([SYS_DICT.PORT]);
})

const drawerType = ref(DRAWER_TYPE.add)

let drawerData = {}
const toggleDrawer = (value, data) => {
  drawerType.value = value
  if(data){
    drawerData = {...data}
    store.toggleDrawer(data)
  }else{
    store.toggleDrawer()
  }
}

const pageDetailInfo = ref({
  currentPage: 1,
  pageSize: 10,
  totalCount: 0,
  totalPages: 0
})

const handlePageInfoUpdate = () => {
  const data = {
    skip: pageDetailInfo.value.currentPage,
    limit: pageDetailInfo.value.pageSize
  }
  store.getEmployeeList(data);
};

</script>

<style scoped lang="less">
.root{
  margin-top: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  padding: 20px;
  .add-employee{
    text-align: left;
    button{
      width: 100px;
      height: 30px;
      color: #5FADFF;
      font-weight: bold;
      background-color: #fff;
      border: 1px solid #5FADFF;
      border-radius: 10px;
    }
  }
  .employee-list{

    // 让子标签的表格位于中间
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .page-container {
    margin-top: 20px;
  }
}


</style>